<template>
  <div class="coupon_list_container" v-if="!this.$route.params.destroyed">
    <BackNavigation v-bind:title-info="titleInfo"/>
    <div class="img-container">
      <img src="../../assets/img/coupon/coupons_list_title_image.png"/>
    </div>
    <div v-if="useList.length">
      <div>
        <img src="../../assets/img/coupon/coupons_list_use_title_image.png" alt="">
      </div>
      <ul class="coupont_use_list">
        <li class="coupont_use_item" v-for="useItem in useList">
          <CouponCellVue v-bind:item="useItem" v-on:coupon-click="couponClick"/>
        </li>
      </ul>
    </div>
    <div v-if="unUseList.length">
      <div>
        <img src="../../assets/img/coupon/coupons_list_unuse_title_image.png" alt="">
      </div>
      <ul class="coupont_unuse_list">
        <li class="coupont_unuse_item" v-for="unUseItem in unUseList">
          <CouponCellVue v-bind:item="unUseItem"/>
        </li>
      </ul>
    </div>
    <NoDataVue v-bind:vue-info="noDataInfo" v-else-if="!nullShow ? nullShow : !(unUseList.length || useList.length)"/>
    <!--<NoDataVue v-else v-bind:vue-info="noDataInfo"/>-->
  </div>
</template>

<script>
  import * as recommend from 'api/recommend'
  import BackNavigation from './navigation.vue'
  import NoDataVue from './no_data.vue'
  import {get_cookie} from 'assets/cookie/cookie'
  import CouponCellVue from './coupon_cell.vue'

  export default {
    name: 'coupon_list',
    components: {
      BackNavigation,
      CouponCellVue,
      NoDataVue
    },
    props: {

    },
    data() {
      return {
        couponList: [],
        useList: [],
        unUseList: [],
        nullShow: false,
        titleInfo: {
          leftTitle: '返回',
          title: '我的礼券',
          rightTitle: ''
        },
        noDataInfo: {
          title: '没有数据啊',
          iconUrl: '../../assets/img/common/no_data.png'
        }
      }
    },
    computed: {
      getTitleWidth() {
        let width = document.body.clientWidth
        return (width - 120 - 30)
      },
      getDestroyed () {
        return this.$route.params.destroyed
      }
    },
    methods: {
      backPrePage () {
        this.$route.params.destroyed = true
        this.$router.back()
      },
      couponClick () {
        this.$router.push('/allClass')
      }
    },
    watch: {
    },
    // vue周期函数
    created() {
//      console.log(this.$route.params.title)
//      console.log('list')
//      let params = {
//        token: get_cookie('key')
//      }
//      recommend.get_my_coupon_list(params).then(resault => {
//        if(resault.status === 200) {
//          this.$data.couponList = resault.data.data
//          this.$data.useList = resault.data.data.use
//          this.$data.unUseList = resault.data.data.not_use
//        }
//        console.log(resault.data.data)
//      }).catch(resault => {
//        console.log(resault)
//      })
    },
    activated () {
      let params = {
        token: get_cookie('key')
      }
      console.log(params)
      recommend.get_my_coupon_list(params).then(resault => {
        this.nullShow = true
        if (resault.status === 200) {
          this.$data.couponList = resault.data.data
          this.$data.useList = resault.data.data.use
          this.$data.unUseList = resault.data.data.not_use
        }
        console.log(resault.data.data)
      }).catch(resault => {
        this.nullShow = true
        console.log(resault)
      })
    },
//    deactivated () {
//      console.log('coupon_list_deactivated')
//    },
//    beforeRouteUpdate () {
//      console.log('coupon_list_beforeRouteUpdate')
//    },
//    beforeRouteLeave () {
//      console.log('coupon_list_beforeRouteLeave')
//    },
    destroyed () {
      console.log('coupon_list_destroyed')
    }
  }
</script>

<style scoped lang="scss">
  div.coupon_list_container {
    position: relative;
    height: auto;
    width: 100%;
    background-color: white;

    >div.img-container {
      padding: 20px 0 20px 0;
      margin-top: 44px;
      background-color: white;
      height: auto;
      width: 100%;

      >img {
        height: auto;
        width: 100%;
      }
    }

    >div {
      width: 100%;
      height: auto;

      >div {
        margin-bottom: 10px;
        width: 100%;
        height: auto;

        >img {
          height: auto;
          width: 80%;
        }
      }

      >ul {
        background-color: white;
        width: 100%;
        height: auto;

        >li {
          width: 100%;
          height: auto;
          list-style: none;
          margin-bottom: 10px;
        }
      }
    }
  }
</style>
